<template>
  <div class="serchlist">
    <div class="serch">
      <mt-search v-model="searchVal" cancel-text="取消" placeholder="搜索"></mt-search>
      <mt-button size="normal">搜索</mt-button>
    </div>
    <div class="lt-order">
      <a href="javascript:;" :class="{'active':current===1}" @click="isactive=!isactive;current=1">
        <span>上架时间</span>
        <span :class="{'fa':true, 'fa-angle-down':isactive, 'fa-angle-up':!isactive}"></span>
      </a>
      <a href="javascript:;" :class="{'active':current===2}" @click="sortByPrice">
        <span>价格</span>
        <span :class="{'fa':true, 'fa-angle-down':!isprice, 'fa-angle-up':isprice}"></span>
      </a>
      <a href="javascript:;" :class="{'active':current===3}" @click="current=3">
        <span>销量</span>
        <span class="fa fa-angle-down"></span>
      </a>
      <a href="javascript:;" :class="{'active':current===4}" @click="current=4">
        <span>折扣</span>
        <span class="fa fa-angle-down"></span>
      </a>
    </div>
    <div class="product">
      <mt-loadmore
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        ref="loadmore"
        :autoFill="autofill"
        :bottomDistance="value"
        bottomPullText="上拉加载更多数据"
        class="clearfix"
      >
        <router-link :to="'/prodetail/'+item.id" class="pro-box" v-for="(item,index) in proList" :key="index">
          <img :src="'http://127.0.0.1:3000'+item.pic[0].picAddr" alt="快来买吧">
          <div class="pro-text">{{item.proName}}</div>
          <div class="pro-price">
            <span class="new-price">{{item.price}}</span>
            <span class="old-price">{{item.oldPrice}}</span>
          </div>
          <mt-button
            type="primary"
            @click.prevent="$router.push({name:'prodetail',params:{id:item.id}})"
          >立即购买</mt-button>
        </router-link>
      </mt-loadmore>
    </div>
  </div>
</template>
<script>
import { searchPro } from "@/api";
export default {
  data() {
    return {
      current: 1,
      isactive: true,
      isprice: false,
      autofill: false,
      allLoaded: false,
      value: 70,
      searchVal: "",
      proData: {
        proName: "",
        page: 1,
        pageSize: 2,
        price: null
      },
      // sort: {},
      proList: []
    };
  },
  created() {
    this.proData.proName = this.$route.params.key;
    this.getproList();
  },
  methods: {
    loadBottom() {
      this.proData.page++;
      this.getproList();
      this.$refs.loadmore.onBottomLoaded();
    },
    getproList() {
      // searchPro(Object.assign(this.proData,this.sort))
      searchPro(this.proData).then(res => {
        if (res.data.data.length === 0) {
          this.allLoaded = true;
        } else {
          this.proList.push(...res.data.data);
        }
      });
    },
    sortByPrice() {
      this.current = 2;
      this.isprice = !this.isprice;
      // this.sort["price"] = this.isprice ? 2 : 1
      this.proData.price = this.isprice ? 1 : 2;
      this.proData.page = 1;
      this.proList.length = 0;
      this.getproList();
    }
  }
};
</script>
<style lang="scss" scoped>
.active {
  color: red;
}
.serchlist {
  position: relative;
  height: 100%;
  overflow: scroll;
  .serch {
    position: relative;
    .mint-search {
      height: auto;
    }
    .mint-button {
      position: absolute;
      top: 8px;
      right: 10px;
      background: #f39393;
      z-index: 990;
      height: 28px;
      font-size: 14px;
      border-radius: 0 4px 4px;
      color: #d9d9d9;
    }
  }
  .lt-order {
    display: flex;
    margin-top: 10px;
    background: #ccc;
    padding: 5px 0;
    a {
      flex: 1;
      text-align: center;
    }
  }
  .mint-loadmore {
    padding-bottom: 70px;
  }
  .product {
    padding: 0 10px 10px;
    .pro-box {
      float: left;
      width: 49%;
      padding-bottom: 10px;
      margin-top: 10px;
      border: 1px solid #ccc;
      box-shadow: 0px 0px 2px 0px #ddd;
      text-decoration: none;
      img {
        width: 100%;
        display: block;
      }
      .pro-text {
        color: #666;
        font-size: 13px;
        padding: 0px 5px;
        display: -webkit-box;
        overflow: hidden;
        white-space: normal !important;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .pro-price {
        text-align: center;
        padding: 10px 0;
        > .new-price {
          font-size: 13px;
          color: red;
          font-weight: 600;
        }
        > .old-price {
          font-size: 13px;
          color: #666;
          text-decoration: line-through;
          margin-left: 10px;
        }
      }
      .mint-button {
        display: block;
        margin: 0 auto;
        font-size: 15px;
        height: auto;
        padding: 5px 15px;
      }
    }
    .pro-box:nth-of-type(even) {
      margin-left: 2%;
    }
  }
}
</style>
